<template>
  <div class="container">
    <div>
      <van-search
          v-model="query.keyword"
          show-action
          placeholder="请输入搜索关键词"
          @search="initAjaxMethod"
        >
          <template #action>
            <div @click="initAjaxMethod">搜索</div>
          </template>
      </van-search>
      <van-dropdown-menu>
        <van-dropdown-item v-model="query.shooting_time_sort" :options="shootingList" @change="sortMethod(1)"/>
        <van-dropdown-item v-model="query.download_num_sort" :options="createList" @change="sortMethod(2)" />
        <van-dropdown-item title="筛选" ref="item">
          <div class="tag-serarch-group">
            <div class="tag-serarch-list"> 
              <div class="tag-serarch-title">文件类型:</div>
              <div class="tag-serarch-checkbox">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="fileTypeCheckAllChange">全选</el-checkbox>
                  <div style="margin: 10px 0;"></div>
                  <el-checkbox-group v-model="checkedFileType" @change="fileTypeCheckedCitiesChange"> 
                    <el-checkbox :label="1">视频</el-checkbox>
                    <el-checkbox :label="0">图片</el-checkbox>
                  </el-checkbox-group>
              </div>
            </div>
            <div class="tag-serarch-list" v-for="(item,index) in searchList" :key="index"> 
              <div class="tag-serarch-title">{{item.title}}:</div> 
              <div class="tag-serarch-checkbox">
                  <el-checkbox :indeterminate="item.isIndeterminate" v-model="item.checkAll" @change="(e)=>handleCheckAllChange(e,index)">全选</el-checkbox> 
                  <div style="margin: 10px 0;"></div>
                  <el-checkbox-group v-model="item.checkResult" @change="(e)=>handleCheckedCitiesChange(e,index)">
                    <el-checkbox :label="val.id" v-for="(val,key) in item.children" :key="index+'-'+key">{{val.title}}</el-checkbox>
                  </el-checkbox-group>
              </div>
            </div>
          </div>
          <div style="padding: 5px 16px;display:flex;justify-content: space-between;">
            <van-button type="danger" size="small" block round @click="handleClose" style="width:46%;">清空</van-button>
            <van-button type="info" size="small" block round @click="handleSearchTag" style="width:46%;">确认</van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="main scrollbar" style="height:68vh;padding-bottom:10px;" @scroll="scrollbarTop" ref="scrollbars">
			<div class="traingplan">
				<div v-for="(item, index) in tableData" :key="index" class="traingplan-group">
					<div class="traingplan-group-item">
            <div class="traingplan-img-group" @click="goToDetail(item)">
              <img :src="item.cover_image?item.cover_image:mrtImg" />
              <div class="traingplan-text-group">
                <div>
                  <el-tag type="success" size="mini" v-if="item.type == 0">图片</el-tag>
                  <el-tag type="warning" size="mini" v-if="item.type == 1">视频</el-tag>
                  {{item.title}}</div>
                <div>{{item.content}}</div>
              </div>
            </div>
            <div class="traingplan-text-group1">
              <div>{{item.shooting_time}}</div>
              <div>共{{item.file_num}}{{item.type == 0?'张':'段'}}</div>
              <div>下载：{{item.download_num}}</div>
            </div>
					</div>
        </div>
        <not-find v-if="tableData.length == 0"></not-find>
      </div>
    </div>
    <div style="padding:10px;">
        <van-pagination v-model="query.pageIndex" :page-count="Math.ceil(pageTotal/query.pageSize)" mode="simple" @change="initAjaxMethod" />
    </div>
  </div>
</template>
<script>
import notFind from "@/view/common/notFind";
import mrtImg from "@/assets/img/mrt.png";
import {Icon,Popup,Toast,DropdownMenu, DropdownItem,Search,Button,Pagination} from 'vant';
export default {
  name: "mobileResourceList",
  components: {
    notFind,[Icon.name]: Icon,[Popup.name]: Popup,[DropdownMenu.name]: DropdownMenu,[DropdownItem.name]: DropdownItem,[Search.name]:Search,[Button.name]:Button,[Pagination.name]:Pagination
  },
  data() {
    return {
      mrtImg:mrtImg,
      searchList: [],
      tableData: [],
      tagList: [],
      shootingList:[
        { text: '拍摄时间', value: '' },
        { text: '拍摄时间降序', value: 'desc' },
        { text: '拍摄时间升序', value: 'asc' },
      ],
      createList:[
        { text: '下载次数', value: '' },
        { text: '下载次数降序', value: 'desc' },
        { text: '下载次数升序', value: 'asc' },
      ],
      pageTotal:0,
      keyword:'',
      error: false,
      query: {
        type: '',
        shooting_time: [],
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
        shooting_time_sort:'',
        download_num_sort:'',
        cate_ids:''
      },
      checkedFileType:[],
      checkAll: false,
      isIndeterminate: false
    };
  },
   activated(){
    let ifDoFresh=window.sessionStorage.getItem('jqjtIsBack');
    if(ifDoFresh == 1){
      this.handleClose()
      this.otherAjaxMethod();
      this.$refs['scrollbars'].scrollTop=0;
    }
    this.$refs['scrollbars'].scrollTop=this.scrollTop || 0;
  },
  methods: {
    scrollbarTop(e){
      this.scrollTop=e.target.scrollTop;
    },
    fileTypeCheckAllChange(val){
      this.checkedFileType = val ? [0,1] : [];
      this.isIndeterminate = false;
      this.changeCheckTag();
    },
    fileTypeCheckedCitiesChange(value) {
      this.checkAll = value.length === 2?true:false;
      this.isIndeterminate = value.length > 0 && value.length < 2;
    },
    handleCheckAllChange(val,index){
      const childIds=Array.isArray(this.searchList[index].children)?this.searchList[index].children.map(item=>item.id):[];
      this.searchList[index].checkResult=val?childIds:[];
      this.searchList[index].isIndeterminate=false;
    },
    handleCheckedCitiesChange(value,index){
      this.searchList[index].checkAll=value.length === this.searchList[index].children.length?true:false;
      this.searchList[index].isIndeterminate=value.length > 0 && value.length < this.searchList[index].children.length;
    },
    handleSearchTag(){
      let cate_ids=[];
      this.searchList.forEach(item=>{
        item.checkResult.forEach(val=>{
          cate_ids.push(val)
        })
      })
      this.query.cate_ids=cate_ids.length>0?cate_ids.join(','):'';
      this.query.type=this.checkedFileType.length==1?this.checkedFileType[0]:'';
      this.pageIndex=1;
      this.initAjaxMethod();
    },
    handleClose(){
      this.checkedFileType=[];
      this.checkAll=false;
      this.isIndeterminate=false;
      this.searchList.forEach(item=>{
        item.checkResult=[];
        item.checkAll=false;
        item.isIndeterminate=false;
      })
      this.tagList=[];
      this.query.type='';
      this.query.cate_ids='';
      this.pageIndex=1;
      this.initAjaxMethod();
    },
    handleSizeChange(val) {
      this.query.pageSize=val;
      this.initAjaxMethod();
    },
    handlePageChange(val){
      this.query.pageIndex=val;
      this.initAjaxMethod();
    },
    goToDetail(data){
      this.$router.push({path:'/mobileResourceEdit',query:{id:data.id,type:1}})
    },
    handleSearch(){
      this.query.pageIndex=1;
      this.initAjaxMethod();
    },
    resultClick(){
      this.query={
        type: false,
        shooting_time: [],
        pageIndex: 1,
        pageSize: 10,
        keyword: "",
        shooting_time_sort:'',
        download_num_sort:'',
        cate_ids:''
      };
      this.handleClose('all');
    },
    sortMethod(flag){
      if(flag == 1){
        this.query.download_num_sort='';
      }else{
        this.query.shooting_time_sort=''
      }
      this.initAjaxMethod();
    },
    //列表加载
    initAjaxMethod() {
      Toast.loading({ message: "加载中...", forbidClick: true });
      this.$http
        .post(this.$API.MEDIA_INDEX, {
          page: this.query.pageIndex,
          listRows: this.query.pageSize,
          title: this.query.keyword,
          type: this.query.type==-1?'':this.query.type,
          keyword: this.query.keyword,
          shooting_time: this.query.shooting_time.length>1?this.query.shooting_time.join('~'):'',
          shooting_time_sort:this.query.shooting_time_sort,
          download_num_sort:this.query.download_num_sort,
          cate_ids:this.query.cate_ids
        })
        .then((res) => {
          Toast.clear();
          if (res.code == 1) {
            this.tableData=Array.isArray(res.data.data)?res.data.data:[];
            this.pageTotal=res.data.total;
          }
        })
    },
    otherAjaxMethod(){
      this.$http.post(this.$API.RESOURCE_SEARCH_INDEX)
        .then((res) => {
          if (res.code == 1) {
            let list = Array.isArray(res.data) ? res.data : [];
            list.forEach(item=>{
              item.checkResult=[];
              item.checkAll=false;
              item.isIndeterminate=false;
            })
            this.searchList = list;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    }
  },
};
</script>
<style lang="less" scoped>
.serarch-group {
  padding: 20px 10%;
}
.traingplan {
  padding:0 10px;
}
.traingplan .traingplan-group {
  box-sizing: border-box;
  margin-top:10px;
  box-shadow: 0 12px 20px 0 rgba(0,0,0,.2);
  border-radius: 6px;
  overflow: hidden;
  font-size: 0;
  background: #ffffff;
}
.traingplan .traingplan-group-item {
  padding:10px 10px 0 10px;
}
.traingplan dt:hover{
  cursor: pointer;
  box-shadow:
   1px 1px 8px 4px rgba(0, 0, 0, 0.4);
}
.traingplan dl img {
  width: 100%;
  height: 160px;
  object-fit:cover
}
.traingplan dd {
  margin-top: 5px;
  font-size: 13px;
}
.title{
  font-size: 14px;
  color:#333;
  font-weight: bold;
  padding:8px;
}
.title_bewteen{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-switch {
  float: right;
}
.traingplan-img-group{
  display: flex;
  padding-bottom:10px;
}
.traingplan-img-group img{
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius:6px;
}
.traingplan-text-group{
  max-width:80%;
}
.traingplan-text-group div{
  padding-left: 10px;
  font-size: 14px;
  color:#333;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traingplan-text-group div:nth-child(1){
  font-size: 15px;
  color:#999;
  font-weight: bold;
}
.traingplan-text-group div:nth-child(2){
  font-size: 14px;
  color:#333;
}
.traingplan-text-group1{
  display: flex;
  align-items: center;
  border-top:1px solid #eee;
}
.traingplan-text-group1 div{
  font-size: 14px;
  color:#888;
  line-height: 40px;
  flex:1;
}
.traingplan-img-group:hover .traingplan-hover{
  display: flex;
}
.traingplan-hover{
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  font-size: 16px;
  color:#fff;
}
p{
  margin:0;
}
.sort-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.sort-group {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.sort-title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
}
.sort-group {
  display: flex;
  align-items: center;
  margin-left: 30px;
  font-size: 14px;
}
.sort-group:hover{
  cursor: pointer;
}
.sort-group:hover span{
  color:#409EFF;
}
.sort-group i{
  font-weight: bold;
}
.sort-active{
  color:#409EFF;
}
.tag-serarch-group{
  border-radius: 4px;
}
.tag-serarch-list{
  display: flex;
  padding:6px 0;
  border-bottom:1px solid #eee;
} 
.tag-serarch-title{
  font-size: 14px;
  color:#888;
  line-height: 20px;
  text-align: right;
  width: 80px;
  font-weight: bold;
} 
.tag-serarch-checkbox{
  padding-left:20px;
  flex:1;
}
</style>



